<template>
  <el-row class="app-container">
    <!-- 左侧：侧边栏 -->
    <el-col :span="5" class="col-full-height">
      <aside class="sidebar">
        <div class="sidebar-header">
          <el-input v-model="keyword" placeholder="搜索站点 / 设备" clearable :prefix-icon="Search" />
        </div>

        <div class="sidebar-section">
          <div class="section-title">你的分区</div>
          <el-select v-model="currentArea" class="full-width" placeholder="选择分区">
            <el-option v-for="item in areaOptions" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </div>

        <div class="sidebar-section tree-section">
          <div class="section-title with-action">
            <span>站点分区</span>
            <!-- <el-button link type="primary" size="small">全部展开</el-button> -->
          </div>
          <el-tree class="sidebar-tree custom-tree" :data="treeData" node-key="id" default-expand-all highlight-current
            :props="treeProps" @node-click="handleTreeClick" />
        </div>

        <div class="sidebar-section">
          <div class="section-title">图层控制</div>
          <el-checkbox-group v-model="checkedLayers" class="layer-group">
            <el-checkbox v-for="item in layerOptions" :key="item.value" :label="item.value">
              <span class="layer-dot" :style="{ background: item.color }"></span>
              {{ item.label }}
            </el-checkbox>
          </el-checkbox-group>
        </div>

        <div class="sidebar-section device-legend">
          <div class="section-title">设备状态</div>
          <div v-for="item in statusLegend" :key="item.label" class="legend-row">
            <span class="legend-dot" :style="{ background: item.color }" />
            <span class="legend-label">{{ item.label }}</span>
            <span class="legend-value">{{ item.value }}</span>
          </div>
        </div>
      </aside>
    </el-col>

    <!-- 中间：地图区域 -->
    <el-col :span="14" class="col-full-height">
      <main class="map-area">
        <!-- 顶部工具条 -->
        <!-- <div class="map-toolbar">
          <div class="toolbar-left">
            <el-button-group>
              <el-button size="small" type="primary" plain>主页</el-button>
              <el-button size="small" plain>巡视</el-button>
              <el-button size="small" plain>热力图</el-button>
            </el-button-group>
          </div>
          <div class="toolbar-right">
            <el-button size="small" circle :icon="Refresh" />
            <el-button size="small" circle :icon="Setting" />
          </div>
        </div> -->

        <!-- 地图容器：在这里挂载真实地图 -->
        <div class="map-container">
          <div class="map-placeholder">
            <span>此处集成地图组件（AMap / Mapbox / Cesium 等）</span>
          </div>
        </div>
      </main>
    </el-col>

    <!-- 右侧：站点详情面板 -->
    <el-col :span="5" class="col-full-height">
        <el-card class="station-panel" shadow="never" v-if="currentStation">
          <div class="station-header">
            <div>
              <div class="station-name">
                {{ currentStation.name }}
                <el-tag size="small" type="success" class="ml-8">
                  运行正常
                </el-tag>
              </div>
              <div class="station-subtitle">
                {{ currentStation.code }} · {{ currentStation.address }}
              </div>
            </div>
            <div class="station-header-actions">
              <el-button size="small" text type="primary">详情</el-button>
              <el-button size="small" text type="danger">报警记录</el-button>
            </div>
          </div>
          <el-divider />
          <!-- 站点信息 -->
          <section class="panel-block">
            <div class="block-title">站点信息</div>
            <el-descriptions :column="2" size="small">
              <el-descriptions-item label="供水区域">
                {{ currentStation.area }}
              </el-descriptions-item>
              <el-descriptions-item label="所属片区">
                {{ currentStation.zone }}
              </el-descriptions-item>
              <el-descriptions-item label="经纬度">
                {{ currentStation.lng }}, {{ currentStation.lat }}
              </el-descriptions-item>
              <el-descriptions-item label="管理员">
                {{ currentStation.manager }}
              </el-descriptions-item>
              <el-descriptions-item label="联系电话">
                {{ currentStation.phone }}
              </el-descriptions-item>
              <el-descriptions-item label="更新时间">
                {{ currentStation.updateTime }}
              </el-descriptions-item>
            </el-descriptions>
          </section>

          <!-- 实时监测数据 -->
          <section class="panel-block">
            <div class="block-title with-action">
              <span>实时监测数据</span>
              <el-button link size="small" type="primary">
                查看全部
              </el-button>
            </div>

            <el-row :gutter="12">
              <el-col v-for="item in realtimeMetrics" :key="item.key" :span="12">
                <div class="metric-card" :class="'metric-' + item.key">
                  <div class="metric-header">
                    <span class="metric-name">{{ item.name }}</span>
                    <el-tag size="small" type="info" v-if="item.status">
                      {{ item.status }}
                    </el-tag>
                  </div>
                  <div class="metric-main">
                    <span class="metric-value">{{ item.value }}</span>
                    <span class="metric-unit">{{ item.unit }}</span>
                  </div>
                  <div class="metric-sub">
                    采集 {{ item.count }} 次 · 最大 {{ item.max }} · 最小
                    {{ item.min }}
                  </div>
                </div>
              </el-col>
            </el-row>
          </section>

          <!-- 趋势 / 对比 / 历史 tabs -->
          <section class="panel-block">
            <el-tabs v-model="activeTab" class="station-tabs">
              <el-tab-pane label="趋势分析" name="trend">
                <div class="chart-placeholder">
                  <span>这里放折线图（ECharts / G2 等）</span>
                </div>
              </el-tab-pane>
              <el-tab-pane label="对比分析" name="compare">
                <div class="chart-placeholder">
                  <span>这里放多站点对比图</span>
                </div>
              </el-tab-pane>
              <el-tab-pane label="历史数据" name="history">
                <el-table :data="historyData" size="small" height="220" stripe>
                  <el-table-column prop="time" label="时间" width="140" />
                  <el-table-column prop="pressure" label="压力(MPa)" />
                  <el-table-column prop="flow" label="流量(m³/h)" />
                  <el-table-column prop="cl" label="余氯(mg/L)" />
                </el-table>
              </el-tab-pane>
            </el-tabs>
          </section>

          <div class="panel-footer">
            <el-button type="primary" class="full-width">
              护栏管理
            </el-button>
          </div>
        </el-card>
    </el-col>
  </el-row>
</template>

<script setup>
import { ref } from 'vue'
import { Search, Refresh, Setting } from '@element-plus/icons-vue'

const keyword = ref('')
const currentArea = ref('area-1')

const areaOptions = [
  { label: '城西供水区', value: 'area-1' },
  { label: '城东供水区', value: 'area-2' },
  { label: '城南供水区', value: 'area-3' }
]

const treeProps = {
  label: 'label',
  children: 'children'
}

const treeData = [
  {
    id: 1,
    label: '城西供水区',
    children: [
      {
        id: 11,
        label: '城区一供',
        children: [
          { id: 111, label: '一供-西区加压站' },
          { id: 112, label: '一供-新区调节池' }
        ]
      },
      {
        id: 12,
        label: '城区二供',
        children: [{ id: 121, label: '二供-北片加压站' }]
      }
    ]
  }
]

const layerOptions = [
  { label: '压力(MPa)', value: 'pressure', color: '#3FA7FF' },
  { label: '流量(m³/h)', value: 'flow', color: '#32C77A' },
  { label: '水位(m)', value: 'level', color: '#FFC542' },
  { label: '水温(℃)', value: 'temp', color: '#FF6B81' }
]
const checkedLayers = ref(layerOptions.map(i => i.value))

const statusLegend = [
  { label: '正常', value: 132, color: '#32C77A' },
  { label: '告警', value: 5, color: '#FF6B81' },
  { label: '离线', value: 9, color: '#A0AEC0' }
]

const mockMarkers = [
  { id: 1, x: 35, y: 30, value: '0.35MPa', label: '一供-西区', type: 'pressure' },
  { id: 2, x: 52, y: 45, value: '1200m³/h', label: '二供-南区', type: 'flow' },
  { id: 3, x: 61, y: 60, value: '0.29MPa', label: '新区加压', type: 'pressure' }
]

const currentStation = ref({
  name: '城西一供加压站',
  code: '站点编号：JS-2025-001',
  address: '城西供水区 · 城区一供',
  area: '城西供水区',
  zone: '城区一供',
  lng: '113.123456',
  lat: '23.123456',
  manager: '王工',
  phone: '138****5678',
  updateTime: '2025-11-17 14:30'
})

const realtimeMetrics = ref([
  {
    key: 'pressure',
    name: '出口压力',
    value: 0.32,
    unit: 'MPa',
    status: '正常',
    count: 1250,
    max: 0.45,
    min: 0.28
  },
  {
    key: 'in-pressure',
    name: '入口压力',
    value: 0.45,
    unit: 'MPa',
    status: '偏高',
    count: 1250,
    max: 0.5,
    min: 0.3
  },
  {
    key: 'flow',
    name: '瞬时流量',
    value: 1250,
    unit: 'm³/h',
    status: '',
    count: 980,
    max: 1680,
    min: 600
  },
  {
    key: 'quality',
    name: '水质评分',
    value: 85,
    unit: '分',
    status: '良好',
    count: 1250,
    max: 95,
    min: 70
  }
])

const historyData = ref([
  { time: '2025-11-17 14:00', pressure: 0.31, flow: 1180, cl: 0.35 },
  { time: '2025-11-17 13:00', pressure: 0.3, flow: 1150, cl: 0.33 },
  { time: '2025-11-17 12:00', pressure: 0.32, flow: 1200, cl: 0.36 },
  { time: '2025-11-17 11:00', pressure: 0.29, flow: 1100, cl: 0.34 }
])

const activeTab = ref('trend')

const handleTreeClick = node => {
  console.log('tree node click:', node)
}
</script>

<style scoped>

.col-full-height>.sidebar,
.col-full-height>.map-area,
.col-full-height>.station-panel-wrap {
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* 左侧 */
.sidebar {
  background: #111827;
  color: #e5e7eb;
  padding: 12px;
  border-radius: 8px;
}

.sidebar-header {
  margin-bottom: 12px;
}

.sidebar-section {
  margin-bottom: 14px;
}

.section-title {
  font-size: 13px;
  color: #9ca3af;
  margin-bottom: 6px;
}

.section-title.with-action {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.full-width {
  width: 100%;
}

.sidebar-tree {
  background: transparent;
  color: #e5e7eb;
  overflow: auto;
  overflow: hidden;
}

/* 当前选中节点背景色 + 文字色 */
.custom-tree :deep(.el-tree-node.is-current > .el-tree-node__content) {
  background-color: rgba(55, 65, 81,0.5);  /* 你想要的选中背景色 */
  color: #fff;
  border-radius: 4px;
}

/* 可选：只改 label 颜色，避免图标被影响 */
.custom-tree :deep(.el-tree-node.is-current .el-tree-node__label) {
  color: #fff;
}

/* 可选：改 hover 颜色 */
.custom-tree :deep(.el-tree-node__content:hover) {

  background-color: rgba(55, 65, 81,0.5);
  border-radius: 4px;
}

.layer-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
}

.layer-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 4px;
}


.legend-row {
  display: flex;
  align-items: center;
  font-size: 12px;
  margin-top: 4px;
}

.legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 6px;
}

.legend-label {
  flex: 1;
  color: #d1d5db;
}

.legend-value {
  color: #f9fafb;
}

/* 中间地图区域 */
.map-area {
  padding: 0  10px;
}

.map-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

/* 地图占用 map-area 的剩余高度 */
.map-container {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  background: #0b1120;
  flex: 1;
}

.map-placeholder {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 10% 20%, #1d4ed8 0, transparent 40%),
    radial-gradient(circle at 80% 60%, #22c55e 0, transparent 40%);
  background-color: #020617;
  opacity: 0.7;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #e5e7eb;
  font-size: 14px;
}

/* 模拟地图 marker */
.map-marker {
  position: absolute;
  transform: translate(-50%, -50%);
  padding: 4px 8px;
  border-radius: 16px;
  color: #fff;
  font-size: 11px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.45);
}

.marker-value {
  font-weight: 600;
}

.marker-label {
  opacity: 0.85;
}

/* 右侧站点面板 */
.station-panel-wrap {
  background-color: red;
  border-radius: 8px;
}

.station-panel {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.station-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.station-name {
  font-size: 16px;
  font-weight: 600;
  display: flex;
  align-items: center;
}

.station-subtitle {
  font-size: 12px;
  color: #6b7280;
  margin-top: 2px;
}

.station-header-actions {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ml-8 {
  margin-left: 8px;
}

.panel-block {
  margin-bottom: 10px;
}

.block-title {
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 6px;
}

.block-title.with-action {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 指标卡片 */
.metric-card {
  border-radius: 8px;
  padding: 8px 10px;
  background: #f9fafb;
  margin-bottom: 8px;
}

.metric-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: #6b7280;
}

.metric-main {
  margin-top: 4px;
  display: flex;
  align-items: baseline;
}

.metric-value {
  font-size: 20px;
  font-weight: 600;
  margin-right: 4px;
}

.metric-unit {
  font-size: 12px;
  color: #6b7280;
}

.metric-sub {
  margin-top: 2px;
  font-size: 11px;
  color: #9ca3af;
}

.metric-pressure {
  background: #ecf5ff;
}

.metric-in-pressure {
  background: #fef3c7;
}

.metric-flow {
  background: #ecfeff;
}

.metric-quality {
  background: #fef2f2;
}

/* tabs & chart 占位 */
.station-tabs {
  --el-tabs-header-height: 32px;
}

.chart-placeholder {
  height: 220px;
  border-radius: 8px;
  background: #f3f4f6;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9ca3af;
  font-size: 13px;
}

/* 底部按钮 */
.panel-footer {
  margin-top: auto;
}

.panel-footer .full-width {
  width: 100%;
}

</style>
